<template>
  <div>
    <van-nav-bar
      title="影院"
      @click-left="handleLeft"
      @click-right="handleRight"
    >
      <template #left>
        <span class="left-text">{{ cityName }}</span
        ><van-icon
          name="arrow-down"
          style="margin-left: 3px"
          color="#000"
          size="12"
        />
      </template>
      <template #right>
        <van-icon name="search" size="24" color="#000" />
      </template>
    </van-nav-bar>
    <van-dropdown-menu
      active-color="#FF6C29"
      style="border-bottom: 1px solid #fff"
    >
      <van-dropdown-item :title="cityTitle" ref="item">
        <ul class="district-list">
          <van-cell
            :class="flag === 0 ? 'chooseActive' : ''"
            @click="changeFlag(-1)"
          >
            <template #title>
              <span class="custom-title">全城</span>
            </template>
          </van-cell>
          <van-cell
            :class="flag === index + 1 ? 'chooseActive' : ''"
            @click="changeFlag(index)"
            v-for="(area, index) in areaList"
            :key="area.districtId"
          >
            <template #title>
              <span class="custom-title">{{ area.name }}</span>
            </template>
          </van-cell>
        </ul>
      </van-dropdown-item>
      <van-dropdown-item
        v-model="value_center"
        :options="optionCenter"
        @change="changeCenter"
      />
      <van-dropdown-item v-model="value_right" :options="optionRight" />
    </van-dropdown-menu>
    <div class="wrapper" :style="{ height: calcHeight }">
      <ul>
        <li
          v-for="cinema in showCinemasDate"
          :key="cinema.cinemaId"
          @click="handleFilm(cinema.cinemaId)"
        >
          <div class="col-1">
            <p>{{ cinema.name }}</p>
            <span v-if="cinema.ticketTypes">
              <span v-for="item in cinema.ticketTypes" :key="item.id"
                >{{ item.name
                }}<strong v-show="!(item.id == cinema.ticketTypes.length)">
                  |
                </strong></span
              >
            </span>
            <span>{{ cinema.address }}</span>
          </div>
          <div class="col-2">
            <div v-if="!cinema.ticketTypes">
              ￥<span>{{ cinema.lowPrice / 100 }}</span
              >起
            </div>
            <div v-else>
              <img src="@/assets/address.png" alt="" width="13" height="17.5" />
            </div>
            <p>距离未知</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import { mapState, mapMutations, mapActions } from "vuex";
import { Dialog } from "vant";

export default {
  components: {},
  data() {
    return {
      num: -1,
      flag: 0,
      cityTitle: "全城",
      showCinemasDate: [],
      calcHeight: "0px",
      value_center: 1,
      value_right: 1,
      optionCenter: [
        { text: "APP订票", value: 1 },
        { text: "前台兑换", value: 2 },
      ],
      optionRight: [
        { text: "最近去过", value: 1 },
        { text: "离我最近", value: 2 },
      ],
    };
  },
  computed: {
    ...mapState("city", ["cityId", "cityName"]),
    ...mapState("cinemaArea", ["cinemaList", "areaList"]),
  },
  created() {
    if (!this.cityId) {
      Dialog.alert({
        message: "定位失败，请手动选择当前所在城市",
      }).then(() => {
        // on close
        this.$router.push({ name: "city" });
      });
    }
  },
  mounted() {
    this.showCinemasDate = this.cinemaList;
    // console.log(this.$store.state.cityId)
    if (this.cinemaList.length === 0) {
      // 分发
      // this.$store.dispatch('getCinemaData', this.cityId, 1).then(response => {
      //   this.$nextTick(() => {
      //     new BetterScroll('.wrapper', {
      //       scrollbar: {
      //         fade: true
      //       }
      //     })
      //   })
      // })

      // mapActions映射之后的写法
      const params = {
        cityId: this.cityId,
        ticketFlag: 1,
      };
      this.getCinemaData(params).then((response) => {
        this.showCinemasDate = this.cinemaList;
        this.$nextTick(() => {
          new BetterScroll(".wrapper", {
            scrollbar: {
              fade: true,
            },
            click: true,
          });
        });
      });
    } else {
      this.$nextTick(() => {
        new BetterScroll(".wrapper", {
          scrollbar: {
            fade: true,
          },
          click: true,
        });
      });
    }
    this.calcHeight =
      document.documentElement.clientHeight - 50 - 46 - 49 + "px";
    // onresize 事件会在窗口或框架被调整大小时发生
    window.onresize = () => {
      console.log(document.documentElement.clientHeight);
      this.calcHeight =
        document.documentElement.clientHeight - 50 - 46 - 49 + "px";
    };
  },
  methods: {
    ...mapMutations("cinemaArea", ["clearCinema"]),
    ...mapActions("cinemaArea", ["getCinemaData"]),
    changeCenter(val) {
      // console.log(val)
      this.flag = 0;
      this.cityTitle = "全城";
      const params = {
        cityId: this.cityId,
        ticketFlag: val,
      };
      this.getCinemaData(params).then((response) => {
        this.showCinemasDate = this.cinemaList;
        this.$nextTick(() => {
          new BetterScroll(".wrapper", {
            scrollbar: {
              fade: true,
            },
            click: true,
          });
        });
      });
    },
    handleFilm(cinemaId) {
      this.$router.push(`/cinema/${cinemaId}/film`);
    },
    handleLeft() {
      this.$router.push("/city");

      // 清空cinemaList
      // this.$store.commit('clearCinema')

      // mapMutations映射之后的写法
      this.clearCinema();
    },
    handleRight() {
      this.$router.push("/cinemas/search");
    },
    changeFlag(index) {
      // console.log(index, '切换城区')
      this.flag = index + 1;
      if (index === -1) {
        this.cityTitle = "全城";
        this.showCinemasDate = this.cinemaList;
      } else {
        this.cityTitle = this.areaList[index].name;
        this.showCinemasDate = this.cinemaList.filter(
          (item) => item.districtName === this.cityTitle
        );
      }
      this.$refs.item.toggle();
    },
  },
};
</script>

<style scoped lang="scss">
.chooseActive {
  color: #ff8954 !important;
  border: 1px solid #ffa880 !important;
}

.district-list {
  padding: 10px 0 0 0;
  margin: 0 0 10px 0;
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: wrap;

  .van-cell {
    width: 31%;
    margin-left: 1.5%;
    margin-bottom: 12px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #797d82;
    border: 1px solid #f2f4f5;
    text-align: center;
    padding: 0 3px;
  }

  .van-cell__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .van-cell::after {
    border: none;
  }

  li {
    font-size: 12px;
    display: inline-block;
    padding-bottom: 15px;
    padding-right: 10px;
    height: 30px;
    flex-shrink: 1;
    border: 1px solid #f2f4f5;
  }

  .area {
    position: relative;
    color: #797d82;
    border-radius: 3px;
    text-align: center;
    height: 30px;
    line-height: 27px;
  }
}

.wrapper {
  overflow: hidden;
  position: relative; // 修正滚动条的位置
}

ul {
  background: #fff;
}

li {
  padding: 15px;
  border-bottom: 1px solid #f8f8f8;
  display: flex;
  align-items: center;
}

.left-text {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-1 {
  flex: 1;
  padding-right: 15px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: calc(100% - 70px);
  box-sizing: border-box;

  p {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 85%;
  }

  span {
    color: #797d82;
    font-size: 12px;
    margin: 5px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 85%;
  }
}

.col-2 {
  width: 70px;
  height: 45px;
  text-align: center;

  div {
    color: #ff5f16;
    font-size: 12px;

    span {
      font-size: 15px;
    }
  }

  p {
    color: #797d82;
    font-size: 12px;
    margin: 5px 0 0;
  }
}
</style>
